<template>
	<view :class="Visible ? 'pop-bg open' : 'pop-bg close'" @click.stop="closePop(null)">
		<view class="pop-content" @click.stop>
			<view class="recharge-top theme-bg mb30">
				<view class="recharge-icon left"></view>
				<view class="recharge-icon right"></view>
			</view>
			<view class="f30 gray3 ww100 mb35 tc fb" style='margin-bottom: 10rpx;'>转账</view>

			<view class="input-box " style="margin-bottom: 20rpx;"><input type="text" placeholder="请输入对方账户"
					v-model="account_value" @input="changeAccount" />
				<image class="input-err" src="/static/icon/input-err.png" mode="" @click="clear()"></image>
			</view>

			<view style="display: flex;justify-content: flex-start;padding:0 40rpx 10rpx;" v-if='toUser.identifier_sn'>
				<view>{{toUser.nickName}}</view>
				<view style="margin-left: 20rpx;">{{toUser.identifier_sn}}</view>
			</view>

			<view class="input-box"><input type="digit" :placeholder="'请输入转账值'" v-model="value" />
				<image class="input-err" src="/static/icon/input-err.png" mode="" @click="value = ''"></image>
			</view>

			<view class="input-box" style="margin-top: 20rpx; position: relative;">
				<input type="digit" :placeholder="'请输入短信验证码'" v-model="code" style="padding-right: 180rpx;" />
				<image class="input-err" src="/static/icon/input-err.png" mode="" @click="code = ''"></image>
				<button class="get-code-btn" @click="getVerificationCode" :disabled="countdown > 0">
					{{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
				</button>
			</view>
			<view class="ww100 d-c-c" style="margin-top: 40rpx;">
				<view class="sub-btn theme-btn" @click="submit()">确认</view>
				<view class="close-btn theme-borderbtn" @click="closePop(null)">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more.vue";
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				account_value: '',
				input_len: 6,
				/*是否可见*/
				Visible: false,
				value: '',
				code: '',
				is_send: false,
				timer: null,
				toUser: {},
				countdown: 0, // 验证码倒计时
				codeTimer: null // 验证码计时器
			}
		},
		props: ['isPop', 'discount_ratio'],
		watch: {
			isPop: function(n, o) {
				let self = this;
				if (n != o) {
					self.Visible = n;
				}
			},
		},
		methods: {
			clear() {
				this.account_value = '';
				this.toUser = {};
			},
			submit() {
				let self = this;
				if (!self.account_value) {
					uni.showToast({
						title: '请输入对方账户',
						icon: 'none'
					});
					return;
				}
				
				if (!self.value) {
					uni.showToast({
						title: '请输入转账值',
						icon: 'none'
					});
					return;
				}
				if (!self.code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}
				uni.showModal({
					title: '转账',
					content: '是否确认转账？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							if (self.is_send) {
								return
							}
							self.is_send = true;
							let page = self.page;
							let list_rows = self.list_rows;
							self._post('user.User/transferBalance', {
								points: self.value,
								identifier_sn: self.account_value,
								code:self.code
							}, function(res) {
								self.is_send = false;
								self.showSuccess(res.msg, () => {
									self.closePop(true);
								})
							}, (err) => {
								self.is_send = false;
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});


			},
			closePop(e) {
				this.$emit('close', e);
				this.value = '';
				this.account_value = '';
				this.toUser = {};
				// 关闭弹窗时清除倒计时
				if (this.codeTimer) {
					clearInterval(this.codeTimer);
					this.codeTimer = null;
					this.countdown = 0;
				}
			},
			changeAccount() {
				let self = this
				if (this.timer) {
					clearTimeout(this.timer)
					this.timer = null
				}

				if (!this.account_value) {
					return
				}

				this.timer = setTimeout(() => {
					self._post('user.User/getToUserinfo', {
						identifier_sn: self.account_value,
					}, function(res) {
						console.log(res)
						self.toUser = res.data
					}, (err) => {

					});
				}, 1500)
			},
			// 获取验证码
			getVerificationCode() {
				let self = this
				//简单验证：确保账户和转账金额已填写
				if (!this.account_value) {
					uni.showToast({
						title: '请输入对方账户',
						icon: 'none'
					});
					return;
				}

				if (!this.value) {
					uni.showToast({
						title: '请输入转账值',
						icon: 'none'
					});
					return;
				}

				//发送验证码逻辑
				self._post('user.useropen/send_sms_code', {}, function(res) {
					// 开始倒计时
					self.countdown = 60;
					self.codeTimer = setInterval(() => {
						if (self.countdown <= 1) {
							clearInterval(self.codeTimer);
							self.codeTimer = null;
							self.countdown = 0;
						} else {
							self.countdown--;
						}
					}, 1000);
				}, (err) => {});
			}
		},
		// 页面销毁时清除计时器
		beforeDestroy() {
			if (this.codeTimer) {
				clearInterval(this.codeTimer);
			}
			if (this.timer) {
				clearTimeout(this.timer);
			}
		}
	}
</script>

<style lang="scss">
	.theme-bg {
		background-color: #19ad57 !important;
	}

	.theme-btn {
		background-color: #19ad57 !important;
	}

	.theme-borderbtn {
		border-color: #19ad57 !important;
	}

	.theme-borderbtn {
		color: #19ad57 !important;
	}

	.recharge-top {
		height: 75rpx;
		position: relative;
		border-radius: 25rpx 25rpx 0 0;

		.recharge-icon {
			width: 12rpx;
			height: 49rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 3rpx 0rpx rgba(6, 0, 1, 0.03);
			border-radius: 6rpx;
			position: absolute;
			top: -15rpx;

		}

		.recharge-icon.left {
			left: 156rpx;
		}

		.recharge-icon.right {
			right: 156rpx;
		}
	}

	.input-box {
		width: 528rpx;
		height: 90rpx;
		border: 1rpx solid #EEEEEE;
		border-radius: 15rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 14rpx 0 21rpx;
		margin: 0 auto;

		input {
			border: none;
			font-size: 26rpx;
			color: #999999;
			flex: 1;
		}
	}

	.input-err {
		width: 42rpx;
		height: 42rpx;
		flex-shrink: 0;
		margin-left: 18rpx;
	}

	.sub-btn {
		width: 248rpx;
		height: 68rpx;
		border-radius: 36rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-content: center;
		margin-right: 93rpx;
		line-height: 68rpx;
	}

	.close-btn {
		width: 248rpx;
		height: 68rpx;
		border-radius: 36rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-content: center;
		line-height: 68rpx;
	}

	.dominant {
		color: $dominant-color;
	}

	.pop-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		z-index: 99;

		.pop-content {
			position: fixed;
			z-index: 100;
			bottom: 0;
			left: 0;
			right: 0;
			top: 0;
			margin: auto;
			width: 616rpx;
			height: 630rpx;
			padding: 0 0 32rpx 0;
			box-sizing: border-box;
			transform: translate3d(0, 0, 0);
			transition: transform 0.2s cubic-bezier(0, 0, 0.25, 1);
			background-color: #FFFFFF;
			border-radius: 25rpx;
		}
	}

	.pop-bg.close {
		// display: none;
		height: 0;

		.pop-content {
			transform: translate3d(0, 2000rpx, 0);
		}
	}

	.code-image {
		width: 360rpx;
		height: 360rpx;

	}

	.icon-img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 16rpx;

	}

	.close-img {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		right: 32rpx;
		top: 32rpx;
	}

	.input-item {
		width: 72rpx;
		height: 96rpx;
		background: #ffffff;
		border-radius: 0px;
		font-size: 40rpx;
		color: rgba(0, 0, 0, 0.87);
		font-weight: 600;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 2rpx solid #00BDBD;
		margin-right: 16rpx;
		text-align: center;
		line-height: 96rpx;
	}

	.input-item:last-child {
		margin-right: 0;
	}

	.input-hid {
		margin-left: -100%;
	}

	.get-code-btn {
		position: absolute;
		right: 60rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		background-color: #FFFFFF;
		color: #19ad57;
		padding: 0;
		margin: 0;
		border: none;
	}

	.get-code-btn:disabled {
		color: #999999;
		background-color: #FFFFFF;
	}

	button[disabled]:not([type]).get-code-btn {
		background-color: #FFFFFF;
		color: #999999;
	}
</style>